<template>
	<view class="container">
		<!-- 微信图标 -->
		<image class="wechat-icon" src="/static/login/wechat.png" mode="aspectFit"></image>

		<!-- 一键登录按钮 -->
		<button class="login-button" @click="handleLogin">微信一键登录</button>
	</view>
</template>

<script>
	import {
		getLogin
	} from "@/request/API.js";
	export default {
		methods: {
			handleLogin() {
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: async ({
						code
					}) => {
						const {
							data
						} = await getLogin(code);
						uni.setStorageSync("token", data.token);
					}
				})
			}
		}
	};
</script>

<style scoped>
	/* 样式 */
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		/* 使容器高度为视口的100% */
	}

	.wechat-icon {
		width: 80px;
		height: 80px;
		margin-bottom: 20px;
	}

	.login-button {
		width: 80%;
		max-width: 300px;
		background-color: #1aad19;
		color: white;
		font-size: 16px;
		border-radius: 50px;
		padding: 12px 0;
	}

	/* 如果需要适配不同平台，可以使用条件编译 */
	/* #ifdef MP-WEIXIN */
	.login-button {
		background-color: #57c41e;
		/* 微信小程序中可能想要不同的颜色 */
	}

	/* #endif */
</style>